<script setup>
  import NcTable from './index.vue';
  import NcTitle from '@/components/NcTitle/index.vue';
  const equipmentColumns = [
    {
      label: '电压等级',
      prop: 'voltageLevel'
    },
    {
      label: '线路',
      prop: 'line'
    },
    {
      label: '主变',
      prop: 'mainSubstation'
    },
    {
      label: '母线',
      prop: 'busbar'
    }
  ];
  const equipmentData = [
    {
      voltageLevel: '500kV及以上',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '220kV',
      line: 0,
      mainSubstation: 0,
      busbar: 1
    },
    {
      voltageLevel: '110kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '35kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '10kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '500kV及以上',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '220kV',
      line: 0,
      mainSubstation: 0,
      busbar: 1
    },
    {
      voltageLevel: '110kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '35kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '10kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '500kV及以上',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '220kV',
      line: 0,
      mainSubstation: 0,
      busbar: 1
    },
    {
      voltageLevel: '110kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '35kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '10kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '500kV及以上',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '220kV',
      line: 0,
      mainSubstation: 0,
      busbar: 1
    },
    {
      voltageLevel: '110kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '35kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '10kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '500kV及以上',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '220kV',
      line: 0,
      mainSubstation: 0,
      busbar: 1
    },
    {
      voltageLevel: '110kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '35kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '10kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '500kV及以上',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '220kV',
      line: 0,
      mainSubstation: 0,
      busbar: 1
    },
    {
      voltageLevel: '110kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '35kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '10kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '500kV及以上',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '220kV',
      line: 0,
      mainSubstation: 0,
      busbar: 1
    },
    {
      voltageLevel: '110kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '35kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '10kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '500kV及以上',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '220kV',
      line: 0,
      mainSubstation: 0,
      busbar: 1
    },
    {
      voltageLevel: '110kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '35kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '10kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '500kV及以上',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '220kV',
      line: 0,
      mainSubstation: 0,
      busbar: 1
    },
    {
      voltageLevel: '110kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '35kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '10kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '500kV及以上',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '220kV',
      line: 0,
      mainSubstation: 0,
      busbar: 1
    },
    {
      voltageLevel: '110kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '35kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    },
    {
      voltageLevel: '10kV',
      line: 0,
      mainSubstation: 0,
      busbar: 0
    }
  ];
  const pagination = reactive({
    total: 0,
    'current-page': 1,
    'page-size': 30
  });
  function handlePageChange(currentPage, pageSize) {
    pagination['currentPage'] = currentPage;
    pagination['pageSize'] = pageSize;
  }

  const handleNodeClick = (data) => {
    console.log(data);
  };

  const data = [
    {
      label: 'Level one 1',
      children: [
        {
          label: 'Level two 1-1',
          children: [
            {
              label: 'Level three 1-1-1'
            }
          ]
        }
      ]
    },
    {
      label: 'Level one 2',
      children: [
        {
          label: 'Level two 2-1',
          children: [
            {
              label: 'Level three 2-1-1'
            }
          ]
        },
        {
          label: 'Level two 2-2',
          children: [
            {
              label: 'Level three 2-2-1'
            }
          ]
        }
      ]
    },
    {
      label: 'Level one 3',
      children: [
        {
          label: 'Level two 3-1',
          children: [
            {
              label: 'Level three 3-1-1'
            }
          ]
        },
        {
          label: 'Level two 3-2',
          children: [
            {
              label: 'Level three 3-2-1'
            }
          ]
        }
      ]
    }
  ];
  const actions = [
    {
      id: 'add',
      text: '新增',
      iconName: 'button_add',
      attrs: { size: 'small' }
    },
    {
      id: 'update',
      text: '修改',
      iconName: 'button_update'
    }
  ];

  const defaultProps = {
    children: 'children',
    label: 'label'
  };
</script>

<template>
  <div class="flex h-full">
    <div class="left-tree w-200px bg-blue-700">
      <NstdTree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
    </div>
    <div class="flex flex-col h-full flex-1 p-16px">
      <NcTitle title="筛选条件" has-more has-padding>
        <NstdForm inline label-width="180px">
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
          <NstdFormItem label="电网风险名称">
            <NstdInput />
          </NstdFormItem>
        </NstdForm>
      </NcTitle>
      <NcTitle class="flex-1" title="电网风险" :has-more="false" :actions="actions">
        <NcTable
          border
          :columns="equipmentColumns"
          :data="equipmentData"
          :pagination="pagination"
          @page-change="handlePageChange"
        />
      </NcTitle>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
